<template>
  <div class="warpper">
    <div class="header">
      <div class="backhome">
        <router-link to="/">返回首页</router-link>
      </div>
    </div>
    <ul>
      <li v-for="item of lineList" :key="item.id">
        <h3 class="title">{{ item.name }}</h3>
        <p class="time">首末班车时间：{{ item.stime }}-{{ item.etime }}</p>
        <p class="price">票价：{{ item.total_price }}元</p>
        <span class="details" @click="open(item.id)">站点详情</span>
        <div v-show="isOpen===item.id">
          <ol>
            <li v-for="point of item.via_stops" :key="point.id">
              <span>{{point.name }}</span>
            </li>
          </ol>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'LineSearch',
  data () {
    return {
      lineName: '',
      lineList: [],
      isOpen: '',
      flag: false
    }
  },
  mounted () {
    this.lineName = this.$route.query.lineName
    this.initLineSearch()
  },
  methods: {
    initLineSearch () {
      const that = this
      AMap.plugin('AMap.LineSearch', () => {
        const lineSearch = new AMap.LineSearch({
          city: '桂林',
          pageSize: 2,
          extensions: 'all'
        })
        lineSearch.search(that.lineName, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
              that.lineList = result.lineInfo
          } else {
            that.lineList = []
          }
        })
      })
    },
    open (id) {
      this.flag = !this.flag
      if (this.flag) {
        this.isOpen = id
      } else {
        this.isOpen = ''
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .warpper
    .header
      height: 40px
      background-color: #0075ff
      padding: 10px 20px
    .backhome
      font-size: 15px
      a
        color: #fff
    ul
      padding: 0 30px
      p
        margin: 0
        color: #999
      .details 
        display: block
        padding: 10px 0
    ul>li
      border-bottom: 1px solid #999;/*no*/
</style>
